<div class="request-service-key-dialog-element">
  <!-- Modal message dialog -->
  <div class="co-dialog modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-show="!working">&times;</button>
            <h4 class="modal-title">Create key for service {{ requestKeyInfo.service }}</h4>
          </div>

          <div class="modal-body" ng-show="working">
            <div class="cor-loader"></div>
          </div>

          <div class="modal-body" ng-show="!working">
            <!-- Step 1 (generate) -->
            <div ng-show="step == 1">
              <form name="createForm" ng-submit="createPresharedKey()">
                <table class="co-form-table">
                  <tr>
                    <td><label for="create-key-name">Key Name:</label></td>
                    <td>
                      <input class="form-control" name="create-key-name" type="text" ng-model="preshared.name" placeholder="Friendly Key Name">
                      <span class="co-help-text">
                        A friendly name for the key for later reference.
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td><label for="create-key-expiration">Expiration date (optional):</label></td>
                    <td>
                      <span class="datetime-picker" datetime="preshared.expiration"></span>
                      <span class="co-help-text">
                        The date and time that the key expires. If left blank, the key will never expire.
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td><label for="create-key-notes">Approval Notes (optional):</label></td>
                    <td>
                      <markdown-input content="preshared.notes" 
                                      can-write="true" 
                                      (content-changed)="updateNotes($event.content)" 
                                      field-title="notes"></markdown-input>
                      <span class="co-help-text">
                        Optional notes for additional human-readable information about why the key was created.
                      </span>
                    </td>
                  </tr>
                </table>
              </form>
            </div>

            <!-- Step 2 (generate) -->
            <div ng-show="step == 2">
              <div class="co-alert co-alert-warning">
                The following key has been generated for service <code>{{ requestKeyInfo.service }}</code>.
                <br><br>
                Please copy the key's ID and copy/download the key's private contents and place it in the directory with the service's configuration.
                <br><br>
                <strong>Once this dialog is closed this private key will not be accessible anywhere else!</strong>
              </div>

              <label>Key ID:</label>
              <div><code>{{ createdKey.kid }}</code></div>
              <label>Private Key (PEM):</label>
              <textarea class="key-display form-control" onclick="this.focus();this.select()" readonly>{{ createdKey.private_key }}</textarea>
            </div>
          </div>
          <div class="modal-footer" ng-show="!working">
            <button type="button" class="btn btn-primary" ng-show="step == 1"
                    ng-disabled="createForm.$invalid"
                    ng-click="createPresharedKey()">
              Generate Key
            </button>

            <button type="button" class="btn btn-primary" ng-click="downloadPrivateKey(createdKey)" ng-if="createdKey && isDownloadSupported()">
              <i class="fa fa-download"></i> Download Private Key
            </button>

            <button type="button" class="btn btn-default" data-dismiss="modal" ng-show="step == 2">Close</button>
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-show="step != 2">Cancel</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</div>